<template>
  <div class="effects-menu">
    <div class="effects-menu-title">特效库</div>
    <div class="effects-menu-items">
      <div
        class="effects-menu-item"
        :class="{
          active: isWeatherEffect(subItem.action) && isWeatherActive(subItem.action),
        }"
        v-for="(subItem, subIndex) in subItems"
        :key="subIndex"
        @click="executeFunction(subItem)"
      >
        <div class="menu-item-icon">
          <IconFont class="icon" :name="subItem.icon" size="2.0833vw" />
          <!-- <img :src="subItem.icon" alt="功能图标" /> -->
        </div>
        <div class="menu-item-text">{{ subItem.text }}</div>
      </div>
    </div>

    <div class="effects-menu-button">
      <button class="menu-button" @click="clearRecently">撤销</button>
      <button class="menu-button" @click="clearAll">清除全部特效</button>
    </div>
  </div>
</template>

<script setup>
import { getobjm } from '@/utils/getobjm.js'
import { ref } from 'vue'
import {
  ESPath, //路径
  ESApertureEffect, //光圈特效
  ESPolygonFence, //电子围栏
  ESPipeFence, //管道电子围栏
  ESAlarm, //报警
  ESCameraVisibleRange, //摄像头
  ESBlastParticleSystem, //粒子爆炸
  ESFireParticleSystem, //粒子烟火
  ESHole, //挖坑,
  ESGeoWater, //水面
} from 'earthsdk3'
import { useEffectsStore } from '@/stores/effectsStore.js'
import { useTreeStore } from '@/stores/treeStore.js'
const treeStore = useTreeStore()
// 使用 Pinia store
const effectsStore = useEffectsStore()
const objm = getobjm()

// 判断是否为天气特效
const isWeatherEffect = (action) => {
  return ['createCloud', 'createRain', 'createSnow', 'createFog'].includes(action)
}

// 检查天气特效是否激活
const isWeatherActive = (action) => {
  if (action === 'createCloud') return effectsStore.openCloud
  if (action === 'createRain') return effectsStore.openRain
  if (action === 'createSnow') return effectsStore.openSnow
  if (action === 'createFog') return effectsStore.openFog
  return false
}

const subItems = [
  {
    text: '路径',
    icon: 'lj',
    // icon: new URL('@/assets/images/sidebar/effectsLibrary/txTest.png', import.meta.url).href,
    action: 'createESPath',
  },
  {
    text: '光圈',
    icon: 'gq',
    action: 'createESApertureEffect',
  },
  {
    text: '电子围栏',
    icon: 'dzwl',
    action: 'createESPolygonFence',
  },
  {
    text: '管道围栏',
    icon: 'gdwl',
    action: 'createESPipeFence',
  },
  {
    text: '报警',
    icon: 'bj',
    action: 'createESAlarm',
  },
  {
    text: '摄像头',
    icon: 'sxt',
    action: 'createESCameraVisibleRange',
  },
  {
    text: '粒子爆炸',
    icon: 'lzbz',
    action: 'createESBlastParticleSystem',
  },
  {
    text: '粒子烟火',
    icon: 'lzyh',
    action: 'createESFireParticleSystem',
  },
  {
    text: '挖坑',
    icon: 'wk',
    action: 'createESHole',
  },
  {
    text: '水面',
    icon: 'sm',
    action: 'createESGeoWater',
  },
  {
    text: '云',
    icon: 'yun',
    action: 'createCloud',
  },
  {
    text: '雨',
    icon: 'yu',
    action: 'createRain',
  },
  {
    text: '雪',
    icon: 'xue',
    action: 'createSnow',
  },
  {
    text: '雾',
    icon: 'wu',
    action: 'createFog',
  },
  {
    text: '关闭天气',
    icon: 'gbtq',
    action: 'clearWeather',
  },
]

// 功能执行方法
const executeFunction = (subItem) => {
  switch (subItem.action) {
    case 'createESPath':
      createESPath()
      break
    case 'createESApertureEffect':
      createESApertureEffect()
      break
    case 'createESPolygonFence':
      createESPolygonFence()
      break
    case 'createESPipeFence':
      createESPipeFence()
      break
    case 'createESAlarm':
      createESAlarm()
      break
    case 'createESCameraVisibleRange':
      createESCameraVisibleRange()
      break
    case 'createESBlastParticleSystem':
      createESBlastParticleSystem()
      break
    case 'createESFireParticleSystem':
      createESFireParticleSystem()
      break
    case 'createESHole':
      createESHole()
      break
    case 'createESGeoWater':
      createESGeoWater()
      break
    case 'createCloud':
      createCloud()
      break
    case 'createRain':
      createRain()
      break
    case 'createSnow':
      createSnow()
      break
    case 'createFog':
      createFog()
      break
    case 'clearWeather':
      clearWeather()
      break
    default:
      console.log(`未知功能: ${subItem.action}`)
  }
}
// 定义emit，用于通知父组件关闭子菜单
const emit = defineEmits(['close-submenu'])
// 路径创建
const createESPath = () => {
  const sceneObjectESPath = objm.createSceneObject(ESPath)
  if (!sceneObjectESPath) return
  // speed   Number  速度【速度 m/s】
  sceneObjectESPath.speed = 5
  //materialMode String  路径样式   singleArrow单箭头样式  multipleArrows多箭头样式  pureColor纯色
  sceneObjectESPath.materialMode = 'multipleArrows'
  sceneObjectESPath.stroked = true //启用线样式
  sceneObjectESPath.strokeWidth = 5 //线宽
  sceneObjectESPath.editing = true

  sceneObjectESPath.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESPath && sceneObjectESPath.editing === false) {
      const pos = sceneObjectESPath.points?.length
      const json = sceneObjectESPath.json
      objm.destroySceneObject(sceneObjectESPath)
      setTimeout(() => {
        if (pos && pos >= 2) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//光圈特效
const createESApertureEffect = () => {
  const sceneObjectESApertureEffect = objm.createSceneObject(ESApertureEffect)
  if (!sceneObjectESApertureEffect) return
  sceneObjectESApertureEffect.radius = 100
  sceneObjectESApertureEffect.editing = true
  sceneObjectESApertureEffect.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESApertureEffect && sceneObjectESApertureEffect.editing === false) {
      const position = sceneObjectESApertureEffect.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESApertureEffect.json
      objm.destroySceneObject(sceneObjectESApertureEffect)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//电子围栏
const createESPolygonFence = () => {
  const sceneObjectESPolygonFence = objm.createSceneObject(ESPolygonFence)
  if (!sceneObjectESPolygonFence) return
  sceneObjectESPolygonFence.height = 30
  //材质模式 danger  checkerboard  warning  cord  scanline  honeycomb  gradientColor
  sceneObjectESPolygonFence.materialMode = 'scanline'
  sceneObjectESPolygonFence.editing = true

  sceneObjectESPolygonFence.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESPolygonFence && sceneObjectESPolygonFence.editing === false) {
      const pos = sceneObjectESPolygonFence.points?.length
      const json = sceneObjectESPolygonFence.json
      objm.destroySceneObject(sceneObjectESPolygonFence)
      setTimeout(() => {
        if (pos && pos >= 3) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//管道围栏
const createESPipeFence = () => {
  const sceneObjectESPipeFence = objm.createSceneObject(ESPipeFence)
  if (!sceneObjectESPipeFence) return
  sceneObjectESPipeFence.height = 20
  sceneObjectESPipeFence.width = 50
  //materialMode  材质样式   purple  blue
  sceneObjectESPipeFence.materialMode = 'purple'
  sceneObjectESPipeFence.editing = true

  sceneObjectESPipeFence.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESPipeFence && sceneObjectESPipeFence.editing === false) {
      const pos = sceneObjectESPipeFence.points?.length
      const json = sceneObjectESPipeFence.json
      objm.destroySceneObject(sceneObjectESPipeFence)
      setTimeout(() => {
        if (pos && pos >= 2) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//报警
const createESAlarm = () => {
  const sceneObjectESAlarm = objm.createSceneObject(ESAlarm)
  if (!sceneObjectESAlarm) return
  sceneObjectESAlarm.radius = 100
  //mode  String  报警模式  cylinder 柱状警告   circle 圆形警告
  sceneObjectESAlarm.mode = 'circle'
  sceneObjectESAlarm.editing = true

  sceneObjectESAlarm.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESAlarm && sceneObjectESAlarm.editing === false) {
      const position = sceneObjectESAlarm.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESAlarm.json
      objm.destroySceneObject(sceneObjectESAlarm)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//摄像头
const createESCameraVisibleRange = () => {
  const sceneObjectESCameraVisibleRange = objm.createSceneObject(ESCameraVisibleRange)
  if (!sceneObjectESCameraVisibleRange) return
  sceneObjectESCameraVisibleRange.fov = 100 //视域夹角 0-180
  sceneObjectESCameraVisibleRange.aspectRatio = 1 //视域宽高比
  sceneObjectESCameraVisibleRange.far = 1000 //远截面距离起点距离（米）
  sceneObjectESCameraVisibleRange.near = 5 //近截面距离起点距离（米）
  sceneObjectESCameraVisibleRange.editing = true

  sceneObjectESCameraVisibleRange.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESCameraVisibleRange && sceneObjectESCameraVisibleRange.editing === false) {
      const position = sceneObjectESCameraVisibleRange.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESCameraVisibleRange.json
      objm.destroySceneObject(sceneObjectESCameraVisibleRange)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//粒子爆炸
const createESBlastParticleSystem = () => {
  const sceneObjectESBlastParticleSystem = objm.createSceneObject(ESBlastParticleSystem)
  if (!sceneObjectESBlastParticleSystem) return
  sceneObjectESBlastParticleSystem.editing = true
  sceneObjectESBlastParticleSystem.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESBlastParticleSystem && sceneObjectESBlastParticleSystem.editing === false) {
      const position = sceneObjectESBlastParticleSystem.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESBlastParticleSystem.json
      objm.destroySceneObject(sceneObjectESBlastParticleSystem)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//粒子烟火
const createESFireParticleSystem = () => {
  const sceneObjectESFireParticleSystem = objm.createSceneObject(ESFireParticleSystem)
  if (!sceneObjectESFireParticleSystem) return
  sceneObjectESFireParticleSystem.editing = true
  sceneObjectESFireParticleSystem.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESFireParticleSystem && sceneObjectESFireParticleSystem.editing === false) {
      const position = sceneObjectESFireParticleSystem.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESFireParticleSystem.json
      objm.destroySceneObject(sceneObjectESFireParticleSystem)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}

//挖坑
const createESHole = () => {
  const sceneObjectESHole = objm.createSceneObject(ESHole)
  if (!sceneObjectESHole) return
  sceneObjectESHole.depth = 100 //深度
  sceneObjectESHole.opacity = 1 //透明度
  sceneObjectESHole.interpolation = 50 //插值距离
  //侧面图片地址、图片uv距离
  sceneObjectESHole.sideImage = {
    url: 'https://img95.699pic.com/xsj/1x/lf/yo.jpg',
    uDis: 50,
    vDis: 50,
  }
  //底面图片地址、图片uv距离
  sceneObjectESHole.bottomImage = {
    url: 'https://img95.699pic.com/photo/50730/5472.jpg_wh860.jpg',
    uDis: 50,
    vDis: 50,
  }
  sceneObjectESHole.editing = true

  sceneObjectESHole.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESHole && sceneObjectESHole.editing === false) {
      const pos = sceneObjectESHole.points?.length
      const json = sceneObjectESHole.json
      objm.destroySceneObject(sceneObjectESHole)
      setTimeout(() => {
        if (pos && pos >= 3) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}
//水面
const createESGeoWater = () => {
  const sceneObjectESGeoWater = objm.createSceneObject(ESGeoWater)
  if (!sceneObjectESGeoWater) return
  //水域类型  river河流  ocean海洋  lake湖面
  sceneObjectESGeoWater.waterType = 'ocean'
  sceneObjectESGeoWater.editing = true
  sceneObjectESGeoWater.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESGeoWater && sceneObjectESGeoWater.editing === false) {
      const pos = sceneObjectESGeoWater.points?.length
      const json = sceneObjectESGeoWater.json
      objm.destroySceneObject(sceneObjectESGeoWater)
      setTimeout(() => {
        if (pos && pos >= 3) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          effectsStore.createEffectsData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-submenu')
}

const createCloud = () => {
  // 切换云的状态
  effectsStore.openCloud = !effectsStore.openCloud
  objm.activeViewer.cloud = effectsStore.openCloud ? 0.5 : 0
}

const createRain = () => {
  // 切换雨的状态
  effectsStore.openRain = !effectsStore.openRain
  objm.activeViewer.rain = effectsStore.openRain ? 0.5 : 0
}

const createSnow = () => {
  // 切换雪的状态
  effectsStore.openSnow = !effectsStore.openSnow
  objm.activeViewer.snow = effectsStore.openSnow ? 0.5 : 0
}

const createFog = () => {
  // 切换雾的状态
  effectsStore.openFog = !effectsStore.openFog
  objm.activeViewer.fog = effectsStore.openFog ? 0.5 : 0
}

const clearWeather = () => {
  objm.activeViewer.cloud = 0
  objm.activeViewer.rain = 0
  objm.activeViewer.snow = 0
  objm.activeViewer.fog = 0
  effectsStore.openCloud = false
  effectsStore.openRain = false
  effectsStore.openSnow = false
  effectsStore.openFog = false
}
//撤回最近一次
const clearRecently = () => {
  if (effectsStore.hasCreateEffectsData) {
    console.log('撤回最近一次', effectsStore.createEffectsData)

    const recently = effectsStore.createEffectsData.pop() //1.删除数组中的最后一个元素 2.返回被删除的元素
    treeStore.destroySceneObjectTreeItem(recently)
    treeStore.treeChange()
  }
}

//清除全部
const clearAll = () => {
  if (!effectsStore.hasCreateEffectsData) return
  effectsStore.createEffectsData.forEach((item) => {
    if (item) treeStore.destroySceneObjectTreeItem(item)
  })
  treeStore.treeChange()
  effectsStore.createEffectsData = []
}
</script>

<style lang="scss" scoped>
.effects-menu {
  width: 15.625vw /* 300px -> 15.625vw */;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 0.4167vw /* 8px -> .4167vw */;
  box-shadow: 0 0 0.5208vw /* 10px -> .5208vw */ rgba(0, 195, 255, 0.5);
  border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
  padding: 0.5208vw /* 10px -> .5208vw */;
  z-index: 2;
  .effects-menu-title {
    font-size: 0.8333vw /* 16px -> .8333vw */;
    color: #00c3ff;
    font-weight: bold;
    padding-bottom: 0.5208vw /* 10px -> .5208vw */;
    border-bottom: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.3);
  }

  .effects-menu-items {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.7813vw /* 15px -> .7813vw */;
    padding: 0.5208vw /* 10px -> .5208vw */ 0;
    flex-wrap: wrap;
    max-height: 10.4167vw /* 200px -> 10.4167vw */;
    overflow: auto;
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 0.4167vw /* 8px -> .4167vw */; // 滚动条宽度
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3); // 滚动条轨道背景
      border-radius: 0.2083vw /* 4px -> .2083vw */; // 轨道圆角
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 195, 255, 0.5); // 滚动条滑块颜色
      border-radius: 0.2083vw /* 4px -> .2083vw */; // 滑块圆角
    }
    .effects-menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5208vw /* 10px -> .5208vw */;
      width: 4.1667vw /* 80px -> 4.1667vw */;
      height: 4.1667vw /* 80px -> 4.1667vw */;
      cursor: pointer;
      border-radius: 0.2083vw /* 4px -> .2083vw */;

      &:hover {
        background-color: rgba(0, 195, 255, 0.2);
        .menu-item-icon {
          .icon {
            scale: 0.8;
          }
        }
      }

      &.active {
        background-color: rgba(0, 195, 255, 0.3);
        border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.8);

        .menu-item-text {
          color: #00c3ff;
          font-weight: bold;
        }
      }

      .menu-item-icon {
        .icon {
          width: 2.0833vw /* 40px -> 2.0833vw */;
          height: 2.0833vw /* 40px -> 2.0833vw */;
          object-fit: contain;
          transition: all 0.5s;
        }
      }
      .menu-item-text {
        height: 0.8333vw /* 16px -> .8333vw */;
        line-height: 0.8333vw /* 16px -> .8333vw */;
        font-size: 0.625vw /* 12px -> .625vw */;
        color: #ffffff;
        text-align: center;
      }
    }
  }
  .effects-menu-button {
    padding-top: 0.5208vw /* 10px -> .5208vw */;
    border-top: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .menu-button {
      background-color: rgba(0, 195, 255, 0.2);
      border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
      color: #00c3ff;
      padding: 0.2604vw /* 5px -> .2604vw */ 0.4167vw /* 8px -> .4167vw */;
      border-radius: 0.2083vw /* 4px -> .2083vw */;
      font-size: 12px;
      cursor: pointer;
      &:hover {
        background-color: rgba(0, 195, 255, 0.4);
      }
    }
  }
}
</style>
